<template>
  <!-- 首页 -->
  <div class="home-page">
    <!-- 导航栏搜索模块 -->
    <van-nav-bar class="navBar-parts" fixed>
      <template #right >
        <van-icon  color="#fff" name="user-o" class="icon-size" @click="$router.push('/my')" />
      </template>
      <template #left>
        <van-icon color="#fff" name="wap-nav" class="icon-size"  @click="channelShow = true"/>
      </template>
      <van-button
      icon="search"
      slot="title"
      size="small"
      type="info"
      round
      class="home-search-btn"
      @click="$router.push('/search')"
      >搜索</van-button>
    </van-nav-bar>

    <!-- 用户频道列表模块 -->
    <van-tabs v-model="active" animated swipeable class="home-tabs">
      <van-tab
      :title="obj.name"
      v-for="obj in UserServiceList"
      :key="obj.id">
       <articles
        :channel="obj"
       />
      </van-tab>
    </van-tabs>

    <!-- 所有频道列表 -->
    <van-popup
    round
    closeable
    @close="closeBtn"
    close-icon-position="top-right"
    v-model="channelShow"
    position="left"
    :style="{ width: '90%', height:'95%' }">
    <AllChannel 
    ref="child" 
    :UserServiceList="UserServiceList"
    :myActive="active"
    @onChannelsJump="onAllJump"
    @channelsVal="onChannelsVal"
    @onDeleteChannel="deleteChannel"
    >
  </AllChannel>
    </van-popup>
  </div>
</template>

<script>
import { getUserService } from '@/service/getDate' 
import AllChannel from '@/components/common/allchannel.vue'
import articles from '@/page/home/children/articles.vue'
import { mapState } from 'vuex'
export default {
   name: 'HomePage',
   data() {
    return {
      active: 0,
      UserServiceList: [],
      channelShow: false,
      closeAllChannel: null
    };
  },
  created() {
    this.UserService()
    console.log(this.UserServiceList);

  },
  components: {
    AllChannel,
    articles
  },
  computed: {
    ...mapState([
      'user',
      'channelsArr'
    ])
  },
  methods: {
   async UserService() {
        let channelsArr = []
          try {
            // 登录
           if(this.user) {
            const { data } = await getUserService()
            channelsArr = data.data.channels
           } else {  // 未登录
            const locaChaneels =  this.channelsArr
              
            // 判断本地是否有数据
            if(locaChaneels) {
                channelsArr = locaChaneels
            } else { // 如果本地储存没有数据的话 则执行下面的代码
              const {data}  = await getUserService()
              channelsArr = data.data.channels
            }
           }
           this.UserServiceList = channelsArr 
          } catch(err) {
            this.$toast.fail('频道获取失败')
          }
         
    },
    // 重新渲染添加页面
    onChannelsVal(data) {
      console.log(data);
      this.UserServiceList.push(data)
    },

    closeAll() {
    },

    onAllJump(index,channelShow = true) {
      this.active = index
      this.channelShow = channelShow
    },

    // 重新渲染删除页面
    deleteChannel(data) {
      this.UserServiceList.splice(data, 1)
    },

    // 当点击关闭频道页面的时候，编辑按钮也自动关闭
    closeBtn() {
      this.$refs.child.EditUserBtn = false
      this.$refs.child.EditAllBtn = false
    }
}}
</script>

<style lang="scss" scoped>
  .home-page {
    padding-bottom: 100px;
    .van-nav-bar__content {
      display: flex;
      justify-content: center;
      align-items: center;
      overflow: hidden;
    }
    .navBar-parts{
      .icon-size {
        font-size: 50px;
      }
      .home-search-btn{
        width: 300px;
        font-size: 25px;
        background-color: #fff;
        border: 0;
        color: #555;
      }
    }
    /deep/.van-tabs {
        position: fixed;
        top: 92px;
        left: 0;
        right: 0;
        font-size: .375rem;
        border-bottom: 1px solid rgb(248, 245, 245);
       .van-tab {
          min-width: 200px;
          &::before {
            content: '';
            position: absolute;
            right: 0;
            width: .0125rem;
            height: 80%;
            background: url('@/images/gradient-gray-line.png');
            background-size: contain;
            color: #999 ;

          }
          .van-tab__text {
            text-overflow: ellipsis;
           
          }
       
        }
        .van-tabs__nav{
            padding-left: 0;
            padding-right: 0;
        }
       }
       /deep/ .van-tab--active {
            font-size: 30px;
            color: #000  ;
          }
       /deep/.van-tabs__wrap {
            border-bottom: 1px solid #f1f1f1;
          }
  }
</style>